import { Button, Card, Flex, Upload, UploadProps } from "antd"
import { useState } from "react"
import { fileToBlob, previewXlsx } from '@/utils/preview'

const ExcelPreview = () => {
    const [tempFile, setTempFile] = useState<File>()
    const changeFile: UploadProps['onChange'] = (info) => {
        const { file } = info
        setTempFile(file.originFileObj)
    }
    const customRequest = async (): Promise<void> => {
        const blob = await fileToBlob(tempFile as File) as Blob
        await previewXlsx('xlsx', blob)
        setTempFile(undefined)
    }
    return (
        <Card title={<Flex wrap gap='middle'>
            <div>Excel预览</div>
            <Upload
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            maxCount={1}
            showUploadList={false}
            onChange={changeFile}
            customRequest={customRequest}>
                <Button type="primary">导入文件</Button>
            </Upload>
        </Flex>}>
            <div id="xlsx" style={{ height: 'calc(100vh - 216px)' }}></div>
        </Card>
    )
}

export default ExcelPreview